<template>
    <div class="news-popover">
        <div class="tabs">
            <div
                v-for="(item, index) in tabs"
                :key="index"
                class="tab"
                :class="{ tab_active: tabIndex == index }"
                @click="selectTabs(item, index)"
            >
                <div class="img">
                    <img
                        :src="tabIndex == index ? item.icon_active : item.icon"
                        alt=""
                    />
                    <span v-if="item.badge > 0" class="badge">{{
                        item.badge
                    }}</span>
                </div>
                {{ item.name }}
            </div>
        </div>

        <div class="con">
            <!-- <div class="no-data">暂时没有消息~</div> -->
            <template v-if="tabIndex == 0">
                <div
                    v-for="(item, index) in huifuList"
                    :key="index"
                    class="huida"
                    @click="goHuifu(item)"
                >
                    <div class="user">
                        <img
                            :src="item.ans_data.message.extendedData.avatar"
                            alt=""
                        />
                        <div class="nickname">
                            {{ item.ans_data.message.extendedData.nickname }}
                        </div>
                        <span>回答了你的问题</span>
                    </div>
                    <div class="text">
                        {{ item.ans_data.message.message }}
                    </div>
                </div>
            </template>
            <div v-show="tabIndex == 1" class="like-list">
                <div
                    v-for="(item, index) in likeList"
                    :key="index"
                    class="like"
                    @click="goLike(item)"
                >
                    {{ item.info }}<span>点击查看</span>
                </div>
            </div>
            <div v-show="tabIndex == 2" class="like-list">
                <div
                    v-for="(item, index) in tongzhiList"
                    :key="index"
                    class="like"
                    @click="goTongzhi(item)"
                >
                    <div class="tongzhihtml" v-html="item.info"></div>
                </div>
            </div>
        </div>
        <div class="news-footer">
            <div class="">
                <el-checkbox v-model="checked">全部已读</el-checkbox>
            </div>
            <div class="" @click="goNews">查看全部消息</div>
        </div>
    </div>
</template>

<script>
import huifu from "@/assets/images/myNews/huifu.png";
import huifu_active from "@/assets/images/myNews/huifu_active.png";

import like from "@/assets/images/myNews/like.png";
import like_active from "@/assets/images/myNews/like_active.png";

import tongzhi from "@/assets/images/myNews/tongzhi.png";
import tongzhi_active from "@/assets/images/myNews/tongzhi_active.png";

import {
    mychatroomtext,
    getlikecomment,
    getmessage,
} from "@/assets/api/userCenterApi";

import { mapState } from "vuex";

export default {
    name: "newsPopover",
    data() {
        return {
            tabIndex: 0,
            tabs: [
                {
                    name: "回复",
                    icon: huifu,
                    icon_active: huifu_active,
                    badge: 0,
                },
                {
                    name: "评论和赞",
                    icon: like,
                    icon_active: like_active,
                    badge: 0,
                },
                {
                    name: "系统",
                    icon: tongzhi,
                    icon_active: tongzhi_active,
                    badge: 0,
                },
            ],

            huifuList: [],
            likeList: [],
            tongzhiList: [],

            checked: false,
        };
    },
    mounted() {},
    destroyed() {},
    computed: {
        ...mapState("common", {
            messageCount: (state) => state.messageCount,
        }),
    },
    watch: {},
    methods: {
        selectTabs(item, index) {
            this.tabIndex = index;
            this.getMessageList();
        },

        // 显示时也到
        async getMessageList() {
            this.tabs[1].badge = this.messageCount.commentandlike;
            this.tabs[2].badge = this.messageCount.message;
            let res = {};
            if (this.tabIndex == 0) {
                res = await mychatroomtext({
                    page: 1,
                    pagesize: 1,
                });
                if (res.code == 1) {
                    if (res.data.length > 0)
                        res.data[0].ans_data.message = JSON.parse(
                            res.data[0].ans_data.message
                        );
                    this.huifuList = res.data;
                }
            }
            if (this.tabIndex == 1) {
                res = await getlikecomment({
                    page: 1,
                    pagesize: 4,
                });
                if (res.code == 1) {
                    this.likeList = res.data;
                }
            }
            if (this.tabIndex == 2) {
                res = await getmessage({
                    type: 3,
                    page: 1,
                    pagesize: 4,
                });
                if (res.code == 1) {
                    this.tongzhiList = res.data;
                }
            }
        },

        goLike(item) {
            let { href } = this.$router.resolve({
                path: "/cswd/" + item.quiz_id + ".html",
            });
            window.open(href, "_blank");
        },

        goHuifu(item) {
           

            if (item.status == 2) {
                this.$router.push({
                    path: `/chat/${item.id}`
                });
               
            } else if (item.status == 3) {
                let { href } = this.$router.resolve({
                    path: "/cswd/" + item.id + ".html",
                });
                window.open(href, "_blank");
            }
        },

        goTongzhi(item) {
            // console.log(item)
            if (item.type == 13) {
                this.$router.push({
                    path: "/service/shoporder",
                    query: {
                        orderNo: item.from_id,
                    },
                });
                return;
            }
            if (item.type == 14) {
                this.$router.push({
                    path: "/service/demanddetail",
                    query: {
                        id: item.from_id,
                    },
                });
                return;
            }
            if (item.quiz_status == 2) {
                this.$router.push({
                    path: `/chat/${item.quiz_id}`
                });
            } else if (item.quiz_status == 3) {
                let { href } = this.$router.resolve({
                    path: "/cswd/" + item.quiz_id + ".html",
                });
                window.open(href, "_blank");
            }
        },

        goNews() {
            if (this.tabIndex == 0)
                this.$router.push({
                    name: "MyNews",
                    params: { url: "collectask" },
                });
            else if (this.tabIndex == 1)
                this.$router.push({ name: "MyNews", params: { url: "like" } });
            else if (this.tabIndex == 2)
                this.$router.push({
                    name: "MyNews",
                    params: { url: "system" },
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.news-popover {
    padding: 11px 14px;
    position: relative;
}

.news-footer {
    position: absolute;
    width: 365px;
    height: 52px;
    background: #f9f9f9;
    border-radius: 0px 0px 4px 4px;
    bottom: -12px;
    left: -13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    div {
        font-size: 14px;
        color: #666666;
        cursor: pointer;
    }
}

.tabs {
    display: flex;
    justify-content: space-between;
    padding: 6px 24px 19px;
    border-bottom: 1px solid #ededed;
    .tab {
        text-align: center;
        font-size: 14px;
        color: #333333;
        cursor: pointer;

        .img {
            position: relative;
            width: 32px;
            margin: 0 auto;

            img {
                width: 32px;
                height: 32px;
                margin-bottom: 4px;
                display: block;
            }
            .badge {
                position: absolute;
                right: -7px;
                top: -10px;
                padding: 0 4px;
                background: #fa5151;
                border-radius: 50px;
                font-size: 12px;
                color: #ffffff;
            }
        }

        &:hover {
            opacity: 0.8;
        }
    }
    .tab_active {
        color: #1c87f3;
    }
}

.con {
    height: 215px;
    max-height: 215px;
    .no-data {
        font-size: 16px;
        color: #9e9e9e;
        padding-top: 77px;
        text-align: center;
    }
}

.huida {
    background: #f8fafd;
    // background-color: red;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 17px 0 28px;
    cursor: pointer;
    .user {
        font-size: 14px;
        color: #333333;
        display: flex;
        align-items: center;
        img {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            overflow: hidden;
            margin-right: 9px;
            object-fit: cover;
        }
        span {
            color: #999999;
            padding-left: 14px;
        }
        .nickname {
            width: 120px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .text {
        font-size: 14px;
        color: #666666;
        line-height: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        padding-top: 11px;
    }
}

.like-list {
    padding-left: 8px;
    padding-top: 12px;
    .like {
        font-size: 14px;
        color: #666666;
        line-height: 46px;
        cursor: pointer;
        span {
            color: #1c87f3;
            padding-left: 6px;
        }
    }
}

.tongzhihtml {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>